<template>
    <el-main>
      <h2>修改楼盘信息</h2>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form ref="form" :model="form"  label-width="80px">
            <el-form-item label="楼盘名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入楼盘名称" />
            </el-form-item>
            <el-form-item label="楼盘地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入楼盘地址" />
            </el-form-item>
            <el-form-item label="省" prop="provinceSelected">
              <el-select v-model="form.province" @change="getshiid()" clearable placeholder="请选择省">
                <el-option v-for="item in shengoptions" :label="item.regionName" :value="item.regionId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市" prop="citySelected">
              <el-select v-model="form.city" @change="getxianid()" clearable placeholder="请选择市">
                <el-option v-for="item in shioptions" :label="item.regionName" :value="item.regionId"></el-option>
              </el-select>
            </el-form-item>
            <!--<el-form-item label="区" prop="countrySelected">
              <el-select v-model="form.country" clearable placeholder="请选择区">
                <el-option v-for="item in xianoptions" :label="item.regionName" :value="item.regionId"></el-option>
              </el-select>
            </el-form-item>-->
            <el-form-item  label="区" prop="county">
              <el-select v-model="form.county"  @change="getareaOptions()"  placeholder="请选择省或区" clearable>
                <el-option v-for="(item, index) in xianoptions" :key="item.value" :label="item.regionName"
                           :value="item.regionId" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商圈" prop="commercialArea">
              <el-checkbox-group v-model="commercialAreaarr" size="medium">
                <el-checkbox @change="shangquan()" v-for="(item, index) in areaOptions" :key="index" :label="item.id"
                >{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="地铁" prop="subway">
              <el-checkbox-group v-model="subwayarr" size="medium">
                <el-checkbox @change="ditie()" v-for="(item,index) in subwayOptions" :key="index" :label="item.id"
                >{{item.subway}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-row>
              <el-col :span="14">
            <el-form-item label="建筑面积" prop="proportion">
              <el-input v-model="form.proportion" placeholder="请输入建筑面积" >
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="建筑类型" prop="buildingType">
            <el-checkbox-group v-model="buildingTypearr" size="medium">
              <el-checkbox  @change="jianzhu()" v-for="(item, index) in buildingOptions" :key="index" :label="item.value"
              >{{item.label}}</el-checkbox>
            </el-checkbox-group>
            </el-form-item>
            <el-row>
            <el-col :span="14">
            <el-form-item label="容积率" prop="grossPlotRatio">
              <el-input v-model="form.grossPlotRatio" placeholder="请输入容积率" />
            </el-form-item>
            </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
            <el-form-item label="社区类型" prop="communityType">
              <el-select v-model="form.communityType" placeholder="请选择社区类型" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in munityOptions" :key="index" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
            <el-form-item label="绿化率" prop="greenCoverage">
              <el-input v-model="form.greenCoverage" placeholder="请输入绿化率" />
            </el-form-item>
              </el-col>
              <el-col :span="14">
            <el-form-item label="楼栋数" prop="buildingCount">
              <el-input v-model="form.buildingCount" placeholder="请输入楼栋数" />
            </el-form-item>
              </el-col>
              <el-col :span="14">
              <el-form-item label="楼盘特色" prop="propertys">
                <el-checkbox-group v-model="form.propertys" size="medium">
                  <el-checkbox  @change="tese()" v-for="(item, index) in propertyOptions" :key="index" :label="item.id"
                                :disabled="item.disabled">{{item.premisesProperty}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              </el-col>
              <el-col :span="14">
            <el-form-item label="开发商" prop="developer">
              <el-input v-model="form.developer" placeholder="请输入开发商" />
            </el-form-item>
              </el-col>
              <el-col :span="14">
            <el-form-item label="物业公司" prop="estate">
              <el-input v-model="form.estate" placeholder="请输入物业管理公司" />
            </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="物业类型" prop="premisesType">
              <el-select v-model="form.premisesType" placeholder="请选择物业类型" clearable size="small">
                <el-option label="请选择字典生成" value="" />
                <el-option :label="item.name" :value="item.id" v-for="item in premisesTypeList" />
              </el-select>
            </el-form-item>
            <el-col :span="24">
              <el-form-item label="周边配套">
                <el-button type="primary" @click="addzhoubian">增加</el-button>
                <div v-for="(item,index) in form.zhoubianlist">
                  <el-row>
                    <el-col :span="10">
                      <el-form-item  label="标题">
                        <el-input v-model="item.title" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="内容">
                        <el-input v-model="item.content" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-button type="danger" @click="deletezhoubian(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交通情况">
                <el-button type="primary" @click="addjiaotong">增加</el-button>
                <div v-for="(item,index) in form.jiaotonglist">
                  <el-row>
                    <el-col :span="10">
                      <el-form-item  label="标题">
                        <el-input v-model="item.title" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="内容">
                        <el-input v-model="item.content" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-button type="danger" @click="deletejiaotong(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
          <div>
            <el-button type="primary" @click="submitForm">提 交</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="楼盘环境" name="second">
          <template>
            <div>
              <el-row :gutter="15">
                <el-form ref="loupanform" :model="form" size="medium" label-width="100px">
                  <div  style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="户型图">
                        <el-upload
                          class="upload-demo"
                          action="http://localhost/dev-api/file/upload"
                          :on-success="handlesuccess1"
                          :on-preview="handlePreview1"
                          :on-remove="handleRemove1"
                          :before-remove="beforeRemove1"
                          :headers="myHeaders"
                          multiple
                          v-model="form.field1">
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search" @click="field1yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="外景图">
                        <el-upload
                          class="upload-demo"
                          action="http://localhost/dev-api/file/upload"
                          :on-success="handlesuccess2"
                          :on-preview="handlePreview2"
                          :on-remove="handleRemove2"
                          :before-remove="beforeRemove2"
                          :headers="myHeaders"
                          multiple>
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search" @click="field2yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="施工图">
                        <el-upload
                          class="upload-demo"
                          action="http://localhost/dev-api/file/upload"
                          :on-success="handlesuccess3"
                          :on-preview="handlePreview3"
                          :on-remove="handleRemove3"
                          :before-remove="beforeRemove3"
                          :headers="myHeaders"
                          multiple>
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search" @click="field3yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="效果图">
                        <el-upload
                          class="upload-demo"
                          action="http://localhost/dev-api/file/upload"
                          :on-success="handlesuccess4"
                          :on-preview="handlePreview4"
                          :on-remove="handleRemove4"
                          :before-remove="beforeRemove4"
                          :headers="myHeaders"
                          multiple>
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search"  @click="field4yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                  <div style="width: 1000px;height: 100px">
                    <el-col :span="9">
                      <el-form-item label="首页图">
                        <el-upload
                          class="upload-demo"
                          action="http://localhost/dev-api/file/upload"
                          :on-success="handlesuccess5"
                          :on-preview="handlePreview5"
                          :on-remove="handleRemove5"
                          :before-remove="beforeRemove5"
                          :headers="myHeaders"
                          multiple>
                          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search"  @click="field5yulan" size="medium"> 预览 </el-button>
                      </el-form-item>
                    </el-col>
                  </div>
                </el-form>
              </el-row>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>

    </el-main>
</template>

<script>
  import { addInfo, updateInfo,getsheng,getshi,getxian,getPremisesTypeList,getarea,getzhixiasubway,getproperty,selectById } from "@/api/house/info";
  import {getToken} from "@/utils/auth";
  import {getAuthToken} from "@/api/file";
    export default {
        name: "update",
        data(){
          return{
            myHeaders:{ 'Authorization': 'Bearer ' + getToken() },
            //特色
            propertyOptions: [],
            //建筑类型
            buildingTypearr: [],
            //商圈
            commercialAreaarr: [],
            //地铁
            subwayarr: [],
            areaOptions:[],
            //物业类型
            premisesTypeList:[],
            //省
            shengoptions:[],
            //市
            shioptions:[],
            //县
            xianoptions:[],
            //地铁
            subwayOptions: [],
            activeName: 'first',
            form: {
              propertys: [],
              zhoubianlist:[],
              jiaotonglist:[],
            },
            buildingOptions: [{
              "label": "板楼",
              "value": 1
            }, {
              "label": "塔楼",
              "value": 2
            }, {
              "label": "板塔结合",
              "value": 3
            }, {
              "label": "底层",
              "value": 4
            }, {
              "label": "多层",
              "value": 5
            }, {
              "label": "高层",
              "value": 6
            }],
            munityOptions: [{
              "label": "未知类型",
              "value": 1
            }, {
              "label": "大型社区",
              "value": 2
            }, {
              "label": "中型社区",
              "value": 3
            }, {
              "label": "小型社区",
              "value": 4
            }],
          }
        },
        methods:{
          deletejiaotong(index){
            this.form.jiaotonglist.splice(index,1)
          },
          addjiaotong(){
            this.form.jiaotonglist.push({
              title:'',
              content:''
            })
          },
          addzhoubian(){
            this.form.zhoubianlist.push({
              title:'',
              content:''
            })
          },
          deletezhoubian(index){
            this.form.zhoubianlist.splice(index,1)
          },
          gettese(){
            getproperty().then(response => {
              this.propertyOptions=response;
              console.log("特色数组",this.propertyOptions)
            });
          },
          tese(){
            console.log("特色:",this.form.propertys);
          },
          jianzhu(){
            console.log("建筑:",this.buildingTypearr);
            var arr = this.buildingTypearr.join(',');
            this.form.buildingType=arr;
            console.log("建筑拼接:",this.form.buildingType);
          },
          ditie(){
            console.log("地铁:",this.subwayarr);
            var arr = this.subwayarr.join(',');
            this.form.subway=arr;
            console.log("地铁拼接:",this.form.subway);
          },
          shangquan(){
            console.log("商圈:",this.commercialAreaarr);
            var arr = this.commercialAreaarr.join(',');
            this.form.commercialArea=arr;
            console.log("商圈拼接:",this.form.commercialArea);
          },
          getareaOptions(){
            this.areaOptions=[];
            console.log("get商圈传参:",this.form)
            getarea(this.form).then(response => {
              this.areaOptions=response;

            });
          },
          /*物业类型*/
          getPremisesType(){
            getPremisesTypeList(this.form).then(response=>{
              this.premisesTypeList=response;
              console.log(this.premisesTypeList)
            })
          },
          getsheng(){
            getsheng().then(response => {
              console.log(response)
              this.shengoptions=response;
            });
          },
          getshiid(){
            console.log("getshi:",this.form);
            getshi(this.form).then(response=>{
              this.shioptions=response;
            });
            //查询直辖市地铁
            getzhixiasubway(this.form).then(response=>{
              this.subwayOptions=response;
              console.log("subway",this.subwayOptions);
            })
          },
          getxianid(){
            console.log("getxian:",this.form);
            getxian(this.form).then(response=>{
              this.xianoptions=response;
            });
          },
          handleClick(tab, event) {
            console.log(tab, event);
          },

          /** 提交按钮 */
          submitForm() {
            this.$refs["form"].validate(valid => {
              if (valid) {
                if (this.form.id != null) {
                  updateInfo(this.form).then(response => {
                    this.msgSuccess("修改成功");
                    this.$router.push("/house/list")
                  });
                } else {
                  addInfo(this.form).then(response => {
                    this.msgSuccess("新增成功");
                    this.$router.push("/house/list")
                  });
                }
              }
            });
          },
          // 取消按钮
          cancel() {
            this.open = false;
            this.reset();
          },
          handlesuccess1(file){
            console.log("....",file);
            this.form.field1=file.data.url
            console.log("....",this.form.field1);
          },
          handleRemove1(file) {
            console.log("::::",file);
          },
          handlePreview1(file) {
            console.log("1111",file);
          },
          beforeRemove1(file) {
            return this.$confirm(`确定移除${ file.name }'？`);
          },
          handlesuccess2(file){
            console.log("....",file);
            this.form.field2=file.data.url
            console.log("....",this.form.field2);
          },
          handleRemove2(file) {
            console.log("::::",file);
          },
          handlePreview2(file) {
            console.log("1111",file);
          },
          beforeRemove2(file) {
            return this.$confirm(`确定移除${ file.name }'？`);
          },
          handlesuccess3(file){
            console.log("....",file);
            this.form.field3=file.data.url
            console.log("....",this.form.field3);
          },
          handleRemove3(file) {
            console.log("::::",file);
          },
          handlePreview3(file) {
            console.log("1111",file);
          },
          beforeRemove3(file) {
            return this.$confirm(`确定移除${ file.name }'？`);
          },
          handlesuccess4(file){
            console.log("....",file);
            this.form.field4=file.data.url
            console.log("....",this.form.field4);
          },
          handleRemove4(file) {
            console.log("::::",file);
          },
          handlePreview4(file) {
            console.log("1111",file);
          },
          beforeRemove4(file) {
            return this.$confirm(`确定移除${ file.name }'？`);
          },
          handlesuccess5(file){
            console.log("....",file);
            this.form.field5=file.data.url
            console.log("....",this.form.field5);
          },
          handleRemove5(file) {
            console.log("::::",file);
          },
          handlePreview5(file) {
            console.log("1111",file);
          },
          beforeRemove5(file) {
            return this.$confirm(`确定移除${ file.name }'？`);
          },
          field1yulan(){
            var url = this.form.field1 //要预览文件的访问地址
            window.open(url);
          },
          field2yulan(){
            var url = this.form.field2
            window.open(url);
          },
          field3yulan(){
            var url = this.form.field3
            window.open(url);
          },
          field4yulan(){
            var url = this.form.field4
            window.open(url);
          },
          field5yulan(){
            var url = this.form.field5
            window.open(url);

          },
        },
      created() {
        this.getPremisesType();
        this.getsheng();
        this.getshiid();
        this.getxianid();
        this.gettese();
        var id=this.$route.query.id;
        selectById(id).then(response=>{
          this.form=response.data;
          this.shengoptions();
          this.shioptions();
          this.xianoptions();
          this.ditie(response.data.province)
          // this.buildingType.push(response.data.buildingType);
          // console.log(this.buildingType,"+++++++++++++++");
          console.log(response.data);
        })
      }
    }
</script>

<style scoped>

</style>
